<template>
  <div class="mainDiv">
    <el-form ref="articleForm" label-width="150px" label-position="left">
      <el-form-item label="所属栏目" prop="column_id">
        <el-cascader
          v-model="path"
          placeholder="显示所选择的栏目"
          :options="columnOptions"
          :props="defaultProps"
          style="width: 400px;"
          clearable
          @change="handleCascaderChange"
        />
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="article.title" style="width: 400px;" :maxlength="30" placeholder="必填，请输入文章标题，小于30个中文" clearable />
      </el-form-item>
      <el-form-item label="文章缩略图" prop="thumbnail">
        <UploadAvatar v-model="article.thumbnail" tipmsg="选填，请上传300*200px的jpg.png格式的图片" />
      </el-form-item>
      <el-form-item label="图文" prop="content">
        <el-radio-group v-model="content_type" style="margin-bottom: 30px;">
          <el-radio-button :label="1">PC端</el-radio-button>
          <el-radio-button :label="2">H5端</el-radio-button>
        </el-radio-group>
        <Tinymce v-if="content_type === 1" ref="editor" v-model="article.pc_content" style="width: 100%" :height="50" />
        <Tinymce v-else ref="editor_2" v-model="article.mobile_content" style="width: 100%" :height="50" />

      </el-form-item>
      <el-form-item label="外链地址" prop="external_url">
        <el-input v-model="article.external_url" style="width: 400px;" placeholder="选填，请输入外链地址，开头加https://或http://" clearable />
      </el-form-item>
      <el-form-item label="排序" prop="weight">
        <el-input-number v-model="article.weight" style="width: 400px;" placeholder="选填，数值越大，排序越靠前" clearable />
      </el-form-item>
      <el-form-item label="是否显示" prop="is_show">
        <el-radio v-model="article.is_show" :label="1">显示</el-radio>
        <el-radio v-model="article.is_show" :label="2">隐藏</el-radio>
      </el-form-item>
      <el-form-item label="是否推荐" prop="is_recommend">
        <el-radio v-model="article.is_recommend" :label="1">推荐</el-radio>
        <el-radio v-model="article.is_recommend" :label="2">不推荐</el-radio>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="comfirmLoading" @click="handleComfirmClick">确认</el-button>
        <!-- 功能暂时隐藏 -->
        <!-- <el-button>预览</el-button> -->
        <el-button @click="backToPrev">取消，返回上一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Tinymce from '@/new_components/Tinymce'
import { getColumnTrees, addNewArticle, modifyArticle, getAricleDetail } from '../../api/informationNetwork'
export default {
  components: {
    Tinymce,
    UploadAvatar: () => import('../informationNetwork/Upload')
  },
  data() {
    return {
      action: 'new',
      defaultProps: {
        children: 'children',
        label: 'title',
        value: 'id',
        checkStrictly: true
      },
      articleId: '',
      path: [],
      article: { // 这是数据都是接口出来之前临时使用
        column_id: null,
        title: null,
        thumbnail: '',
        pc_content: '',
        mobile_content: '',
        external_url: null,
        is_show: 1, // 1---显示   2---隐藏
        is_recommend: 1 // 1---推荐   2---不推荐
      },
      content_type: 1, // 1---PC端   2---H5端
      columnOptions: [],
      comfirmLoading: false
    }
  },
  mounted() {
    this.getColumnTrees()
    if (this.$route.query.id) {
      this.articleId = this.$route.query.id
      this.getAricleDetail(this.articleId)
      this.action = 'modify'
    } else {
      this.action = 'new'
    }
  },
  methods: {
    // 获取文章详情
    getAricleDetail(id) {
      getAricleDetail(id).then(res => {
        this.article = res
        this.path = res.column.path
      })
    },
    // 获取栏目树
    getColumnTrees() {
      getColumnTrees({ depth: 3 }).then(res => {
        this.columnOptions = res
      })
    },
    // 选择父级菜单
    handleCascaderChange(value) {
      if (value) {
        this.article.column_id = value[value.length - 1]
      }
    },
    // 返回上一步
    backToPrev() {
      this.$router.push({ path: '../article' })
    },
    handleComfirmClick() {
      this.comfirmLoading = true
      if (this.action === 'new') { // 新增
        addNewArticle(this.article).then(res => {
          this.$message({
            type: 'success',
            message: '新增文章成功！'
          })
          this.$router.push({ path: '../article' })
        }).finally(() => {
          this.comfirmLoading = false
        })
      } else { // 修改
        modifyArticle(this.articleId, this.article).then(res => {
          this.$message({
            type: 'success',
            message: '该文章更新成功！'
          })
          this.$router.push({ path: '../article' })
        }).finally(() => {
          this.comfirmLoading = false
        })
      }
    }
  }
}
</script>

<style lang="scss">
  $defaultColor: #0A2145;
  .mainDiv {
    padding: 30px;
  }
  .el-input__inner {
    color: $defaultColor;
    font-size: 14px;
  }
  .el-form--label-left .el-form-item__label { color: $defaultColor; }

  .avatar-uploader .el-upload {
    cursor: pointer;
    // position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 14px;
    color: #0C66FF;
    width: 144px;
    height: 144px;
    text-align: center;
    border: 1px dashed #E1E4EB;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    .plus {
      font-size: 28px;
      width: 38px;
      height: 38px;
      line-height: 38px;
      margin: 0 auto;
      border-radius: 50%;
      background: #FAFAFB;
      margin-bottom: 10px;
    }
    span {
      height: 20px;
      line-height: 20px;
    }
    .el-form-item__content {line-height: 20px;}
  }
  .avatar {
    width: 144px;
    height: 144px;
    display: block;
  }
  .upload {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .text {
      margin-left: 20px;
      color: #9DA6B5;
      font-size: 14px;
      line-height: 19px;
    }
  }

  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    border-radius: 8px;
    background-color: #0C66FF;
    border-color: #0C66FF;
    box-shadow: -1px 0 0 0 #0C66FF;
  }
  .el-radio-button__inner {
    border: none;
    background: transparent;
    padding: 7px 17px;
  }
  .el-radio-button:first-child .el-radio-button__inner {
    border-left: none;
  }
  .el-radio-group {
    border: 1px solid #F1F1F5;
    border-radius: 8px;
  }

  .el-button:focus, .el-button:hover {
    color: #0C66FF;
    border-color: #0C66FF;
    background-color: #fff;
  }
  .el-button--primary {
    color: #FFF;
    background-color: #0C66FF;
    border-color: #0C66FF;
  }
  .el-button--small {
    border-radius: 8px;
  }
  .el-button--primary:hover {
    color: #fff;
    background-color: #0951CC;
    border-color: #0951CC;
  }

</style>
